<script lang="ts" setup>
import type { PropType } from 'vue'

const props = defineProps({
  width: {
    type: Number,
    default: 30,
  },
  type: {
    type: String as PropType<'black' | 'white'>,
    default: 'black',
  },
})
</script>

<template>
  <svg
    v-if="type === 'black'"
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    viewBox="0 0 3816 3815.5"
  >
    <g id="图层_2" data-name="图层 2">
      <g id="图层_2-2" data-name="图层 2">
        <path
          d="M1908,0C853.39,0-.59,874.73,0,1908c.57,991.76,786.5,1907.5,1907.5,1907.5,108,0,109,0,109-179s1-179-107-179c-927,0-1549-765-1549-1550,0-786,622-1547,1549-1547,924,0,1547,765,1547,1547,0,108,0,108,179,108,180,0,180.5,0,180.5-107.5C3816,861.3,2954.7,0,1908,0Z"
        />
      </g>
      <g id="图层_3" data-name="图层 3">
        <path
          d="M3405.5,2247.5c-202-126-307-190-307-324,0-604.93-479.89-1179.76-1189-1202-535.86-16.81-1187,469.2-1187,1187,0,723,660.63,1187,1187,1187,613,0,942.93-458.65,1039-597,50-72,70.28-100,206-8,146,99,134,113,101,182-252.33,527.6-728,690-1024,759-111,25.88-111,26-77,203,30.56,159.09,31.37,161.38,116,147,818-139,1313-853,1428-1215C3743,2426.4,3566.91,2348.18,3405.5,2247.5Zm-1496,490c-456.74,0-827-371.16-827-829s370.26-829,827-829,827,371.16,827,829S2366.24,2737.5,1909.5,2737.5Z"
        />
      </g>
    </g>
  </svg>
  <svg
    v-else-if="type === 'white'"
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    viewBox="0 0 3816 3815.5"
  >
    <g id="图层_2" data-name="图层 2">
      <g id="图层_2-2" data-name="图层 2">
        <path
          class="cls-1"
          d="M1908,0C853.39,0-.59,874.73,0,1908c.57,991.76,786.5,1907.5,1907.5,1907.5,108,0,109,0,109-179s1-179-107-179c-927,0-1549-765-1549-1550,0-786,622-1547,1549-1547,924,0,1547,765,1547,1547,0,108,0,108,179,108,180,0,180.5,0,180.5-107.5C3816,861.3,2954.7,0,1908,0Z"
        />
      </g>
      <g id="图层_3" data-name="图层 3">
        <path
          class="cls-1"
          d="M3405.5,2247.5c-202-126-307-190-307-324,0-604.93-479.89-1179.76-1189-1202-535.86-16.81-1187,469.2-1187,1187,0,723,660.63,1187,1187,1187,613,0,942.93-458.65,1039-597,50-72,70.28-100,206-8,146,99,134,113,101,182-252.33,527.6-728,690-1024,759-111,25.88-111,26-77,203,30.56,159.09,31.37,161.38,116,147,818-139,1313-853,1428-1215C3743,2426.4,3566.91,2348.18,3405.5,2247.5Zm-1496,490c-456.74,0-827-371.16-827-829s370.26-829,827-829,827,371.16,827,829S2366.24,2737.5,1909.5,2737.5Z"
        />
      </g>
    </g>
  </svg>
</template>

<style lang="scss" scoped>
.cls-1 {
  fill: #fff;
}
svg {
  display: block;
}
</style>
